<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿百度注册</title>
    <style>
        .register {
            width: 600px;
            margin: auto;
            border: 1px solid red;
            font-size: 14px;
            padding: 35px;
        }

        label {
            width:65px;
            text-align: right;
            display: block;
            float: left;
            line-height: 48px;
            margin-right:10px;
        }


        input[type=text]{
            width: 300px;
            height: 40px;
            margin: 2px 0px;
            border: 1px solid darkgray;
        }

        input[type=button]{
            height: 45px;
            border: 1px solid darkgray;
            cursor: pointer;
            width: 350px;
        }

        input[type=submit]{
            height: 45px;
            border: 1px solid darkgray;
            cursor: pointer;
            width: 350px;
            background-color: blue;
        }

        input[type=text]:focus{
            border: 1px solid blue;
        }
       .tishi{
           height: 48px;
           line-height: 48px;
           float: right;
           display: none;
       }
    </style>
</head>
<body>

<form class="register">
    <div>
        <label>用户名</label><input id="user" name="username" type="text" onblur="selectForm(this)"onfocus="yincang(this)"   placeholder="请设置用户名">
    <div class="tishi" >设置后不可更改，最多14个英文</div>
    </div>
    <div>
        <label>手机号</label><input id="number" name="phoneNum" onblur="selectForm(this)" type="text" placeholder="请填写手机号">
    </div>
    <div>
        <label>密码</label><input   id="password"  name="password" onblur="selectForm(this)" type="text" placeholder="请设置用户密码">
    </div>
    <div>
        <label>验证码</label>
        <input  id="yanzhen"    type="text" name="yanzhen" onblur="selectForm(this)" placeholder="验证码" style="width: 205px">
        <input type="button" value="点击获取验证码" style="width: 143px">
    </div>
    <div style="margin-left: 75px;font-size: 12px">
        <input type="checkbox"> 阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
    </div>
    <div style="margin-left: 75px;">
        <input type="submit" value="注册">
    </div>
</form>
<script type="text/javascript">
    function selectForm(e) {
         e.parentNode.getElementsByClassName("tishi").item(0).style.display = "none";

        if(e.name=="phoneNum"){
            if(e.value<10000000000||e.value>20000000000||isNaN(e.value)){
                if(e.parentNode.lastChild.id!="tips") {
                    var text = createErrorNode("电话号码填写有误","error");
                    e.parentNode.appendChild(text);
                }
            }else{
                e.parentNode.removeChild(e.parentNode.lastChild);
                var text = createErrorNode("填写正确","true");
                e.parentNode.appendChild(text);
            }
        }else if(e.name=="username"){
            if(e.value=="123456"){
                if(e.parentNode.lastChild.id!="tips") {
                    var text = createErrorNode("此用户名已被注册","error");
                    e.parentNode.appendChild(text);
                }
            }
            else if (!isNaN(e.value)) {
                if (e.parentNode.lastChild.id != "tips") {
                    var text = createErrorNode("不能为纯数字", "error")
                    e.parentNode.appendChild(text);
                }
            }

            else if(e.value.length<6||e.value.length>17){
                if(e.parentNode.lastChild.id!="tips") {
                    var text = createErrorNode("用户名在6到17中间","error");
                    e.parentNode.appendChild(text);
                }
            }else{
                e.parentNode.removeChild(e.parentNode.lastChild);
                var text = createErrorNode("填写正确","true");
                e.parentNode.appendChild(text);
            }
        }
    }


    function createErrorNode(e,a) {
        var text = document.createElement("div");
        text.id = "tips";
        text.style.height = "48px";
        text.style.lineHeight = "48px";
        text.style.float = "right";
        if(a=="error"){
            text.innerHTML="<img src=./cuo.png>"+e;
            text.style.color = "red";
        }else if(a=="true"){
            text.innerHTML="<img src=./dui.png>"
            text.style.color = "green";
        }
        return text;
    }


 function yincang(e) {
        if(e.parentNode.lastChild.id=="tips") {
            e.parentNode.removeChild(e.parentNode.lastChild);
        }
        var tishi = e.parentNode.getElementsByClassName("tishi");
        console.log(tishi);
        tishi.item(0).style.display = "block";
    }

</script>
</body>
</html>
